<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
<style>
    body
    {
        background-image: url(img/b.jpg);
        background-size: cover;
    }
    .m-padded-tb-massive {
        padding-top: 5em !important;
        padding-bottom: 5em !important;
    }
    .m-container-small {
        max-width: 60em !important;
        margin: auto !important;
    }
</style>
<div id="app" class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <el-form ref="form" :model="form" ref="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
            <el-col :span="13">
            <el-input v-model="form.username"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-col :span="13">
            <el-input type="password" v-model="form.password"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="role" prop="role">
            <el-col :span="13">
            <el-select v-model="form.role" placeholder="请选你的身份">
                <el-option label="学生" value="0"></el-option>
                <el-option label="老师" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
            </el-select>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button @click="updateDialogFormVisible=true">忘记密码</el-button>
        </el-form-item>
    </el-form>

    <!--编辑表单-->
    <el-dialog title="找回密码" label-width="100px" :visible.sync="updateDialogFormVisible">
        <el-form :model="reSetForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="reSetForm.username"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="reSetForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" >
                <el-input v-model="reSetForm.email" ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" >
                <el-input v-model="reSetForm.code" ></el-input>
            </el-form-item>

            <el-form-item label="role" prop="role">
                <el-select v-model="reSetForm.role" placeholder="请选你的身份">
                    <el-option label="学生" value="0"></el-option>
                    <el-option label="老师" value="1"></el-option>
                    <el-option label="管理员" value="2"></el-option>
                </el-select>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="getCode" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
            <el-button type="primary" @click="submitHandle">确 定</el-button>
        </div>
    </el-dialog>

</div>

</body>
</html>


<script>
    new Vue({
        el: "#app",
        data:{
            codeBtnWord: '获取验证码', // 获取验证码按钮文字
            waitTime: 60, // 获取验证码按钮失效时间
            getCodeBtnDisable: false,

            reSetForm:{

            },
            updateDialogFormVisible: false,
            form:{
                username:'',
                password:'',
                role:''
            }
        },
        mounted()
        {

        },
        methods:{
            getCode(){
             //   this.reSetForm.code.trim(); //添加报错
                axios.post("/login/getCode",{...this.reSetForm}).then(res=>{
                    if(res.data.code==1){
                        this.$message.success('验证码发送成功');
                        this.$message.info(res.data.data);

                        let that = this;
                        that.waitTime--;
                        that.getCodeBtnDisable = true;
                        this.codeBtnWord = `${this.waitTime}s 后重新发送`;

                        let timer = setInterval(function () {
                            if (that.waitTime > 1) {
                                that.waitTime--
                                that.codeBtnWord = `${that.waitTime}s 后重新发送`
                            } else {
                                clearInterval(timer)
                                that.codeBtnWord = '获取验证码'
                                that.getCodeBtnDisable = false
                                that.waitTime = 60
                            }
                        }, 1000)
                    }else {
                        this.$message.error('获取验证码失败')
                    }
                })
            },
            submitHandle(){
                axios.post("/login/updatePassword",{...this.reSetForm}).then(res=>{
                    if(res.data.code==1){
                        window.location.href='login.html';
                        this.$message.info(res.data.msg || '修改成功');
                    }else {
                        this.$message.error(res.data.msg || '系统忙')
                    }
                })
            },
            login() {
                console.log(this.form);

                axios.post("/login?username="+this.form.username+"&password="+this.form.password+"&role="+this.form.role).then(res=>{
                    if(res.data.code===1){
                        localStorage.setItem('user',JSON.stringify(res.data.data));
                        if(this.form.role==0){//学生
                            window.location.href = 'homeworkForStu.html';
                        }else if(this.form.role==1){//教师
                            window.location.href = 'homework.html';
                        }else if(this.form.role==2) {//系统管理员
                            window.location.href = 'class.html';
                        }

                    }else {
                        window.location.href = 'login.html';
                    }

                })

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }


    })
</script>